<template>
  <page-meta>
    <navigation-bar
      title="个人信息"
      title-align="center"
      background-color="#5896f5"
    />
  </page-meta>
  <view v-if="userInfo != null" style="margin-top: 10px;">
    <view>
      <button
        class="avatar-wrapper" 
        open-type="chooseAvatar"
        :plain="true"
        @chooseavatar="chooseavatar"
      >
        <image class="avatar" :src="userInfo.avatarUrl" />
      </button>
    </view>
    <view class="example">
      <uni-forms ref="baseForm" v-model="userInfo" :rules="rules">
        <uni-forms-item name="nickName" label="昵称" required>
          <uni-easyinput
            v-model="userInfo.nickName"
            type="nickname"
            placeholder="请输入昵称"
            @blur="blurInput"
          />
        </uni-forms-item>
        <uni-forms-item label="姓名">
          <uni-easyinput v-model="userInfo.age" placeholder="请输入您的真实姓名" />
        </uni-forms-item>
        <uni-forms-item label="性别">
          <uni-data-checkbox v-model="userInfo.gender" :localdata="sexs" />
        </uni-forms-item>
        <uni-forms-item label="手机" name="phone">
          <!-- 暂无权限 需要认证 -->
          <button
            open-type="getPhoneNumber"
            class="phone-wrapper"
            size="mini"
            :plain="true"
          >
            <uni-easyinput v-model="userInfo.phone" placeholder="请输入您的联系方式" />
          </button>
        </uni-forms-item>
        <uni-forms-item label="邮箱" name="email">
          <uni-easyinput v-model="userInfo.email" placeholder="请输入您的邮箱" />
        </uni-forms-item>
        <uni-forms-item label="学院">
          <uni-data-select
            v-model="userInfo.college"
            :localdata="colleges"
            :clear="false"
          />
        </uni-forms-item>
        <uni-forms-item label="班级">
          <uni-easyinput v-model="userInfo.classes" placeholder="请输入您的班级" />
        </uni-forms-item>
        <uni-forms-item label="学号">
          <uni-easyinput v-model="userInfo.studentNumber" type="number" placeholder="请输入您的学号" />
        </uni-forms-item>
        <uni-forms-item label="宿舍楼">
          <uni-easyinput v-model="userInfo.dorm" placeholder="请输入您的宿舍楼" />
        </uni-forms-item>
        <uni-forms-item label="宿舍号">
          <uni-easyinput v-model="userInfo.dormNumber" placeholder="请输入您的宿舍号" />
        </uni-forms-item>
        <uni-forms-item>
          <button class="button_submit" size="mini" type="primary" @click="submit">保存</button>
        </uni-forms-item>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { updateUserInfo } from '@/common/api/user.js'
import { getNewSocket } from '@/common/msgListener.js'
export default {
  data() {
    return {
      userInfo: this.$store.state.user.userInfo,
      // 单选数据源
      sexs: [{
        text: '男',
        value: 0
      }, {
        text: '女',
        value: 1
      }, {
        text: '保密',
        value: 2
      }],
      colleges: [{
        value: 0, text: '请选择' 
      }, {
        value: 1, text: '大数据学院' 
      }, {
        value: 2, text: '智能工程学院' 
      }, {
        value: 3, text: '建筑工程学院' 
      }, {
        value: 4, text: '通信工程学院' 
      }, {
        value: 5, text: '淬炼商学院' 
      }, {
        value: 6, text: '行政管理学院' 
      }, {
        value: 7, text: '艺术传媒学院' 
      }],
      rules: {
        nickName: {
          rules: [{
            required: true,
            errorMessage: '请填写昵称！'
          },
          {
            maxLength: 14,
            errorMessage: '昵称的最大长度为14！'
          }]
        },
        email: {
          rules: [{ 
            format: 'email',
            errorMessage: '请输入正确的邮箱' 
          }]
        }
      }
    }
  },
  methods: {
    // 连接服务器webSocket
    connectWebSocket(uid) {
      getNewSocket(uid).connectSocketInit()
      // 接收数据
      uni.$on('getWebSocketMessage', (res) => {
        this.$store.commit('addNewMessage', res.data)
        // 将数据持久化
        uni.setStorage({
          data: this.$store.state.message.messageList,
          key: 'messageList&' + uid
        })
      })
    },
    chooseavatar(e) {
      var _this = this
      var cloudPath = 'avatarUrl_' + this.userInfo.uid + '.jpg'
      uniCloud.uploadFile({
        filePath: e.detail.avatarUrl,
        cloudPath: cloudPath,
        success(e) {
          console.log(e)
          _this.userInfo.avatarUrl = e.fileID
        }
      })
    },
    blurInput(e) {
      this.userInfo.nickName = e.detail.value
    },
    submit() {
      // 点击保存
      this.$refs['baseForm'].validate().then(res => {
        updateUserInfo(this.userInfo)	// 上传更新用户数据
          .then(res => {
            this.$store.commit('updateUserInfo', res)	// 更新本地数据
            uni.showToast({
              title: '保存成功！',
              icon: 'none'
            })
            // 连接webSocket
            this.connectWebSocket(res.uid)
            uni.navigateBack()
          })
      }).catch(err => {
        uni.showToast({
          title: `请检查您的信息`,
          icon: 'error'
        })
      })
    }
  },
  onShow() {	
    if (this.$store.state.user.userInfo.loginType === 0) {
      uni.showToast({
        title: '注册成功！请修改您的信息~',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.phone-wrapper{
		width: 100%;
		padding: 0;
		border: 0;
	}
	.avatar-wrapper{
		text-align: center;
		width: 90px;
		border: 0;
		padding: 5px;
		margin-top: 20px;
		margin-bottom: 20px;
		.avatar{
			width: 70px;
			height: 70px;
			border-radius: 70px;
			vertical-align: middle;
		}
	}
	.example{
		padding: 10px;
		.button_submit{
			margin: auto;
		}
	}
</style>
<style lang="scss">
	.uni-forms-item__content{
		vertical-align: middle;
		text-align: center;
		margin: auto;
	}
	
</style>
